<template>
  <!-- 厂牌 -->
  <div
    class="brand-list"
    v-title
    :data-title="$t('router.labelsClassicalTitle')"
  >
    <v-nav></v-nav>
    <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
    <ul class="list" v-loading="fullscreenLoading">
      <li
        v-for="item of list"
        :key="item.catlabelId"
        @click="goto(item)"
        v-text="item.displayName"
      ></li>
    </ul>
    <nice-empty
      v-show="list.length == 0 && fullscreenLoading == false"
      :emptyText="$t('public.noData')"
    ></nice-empty>
    <!-- <div v-if="loading" class="load-bottom">
      <nice-loading />
    </div> -->
  </div>
</template>

<script>
import vNav from "@/components/common/header/Nav";
import vFilter from "@/components/common/filter/Index";
export default {
  data() {
    return {
      filter: ["en"],
      //专辑列表
      list: [],
      // 是否显示加载动画
      loading: false,
      // 是否还有数据
      loadStatus: true,
      fullscreenLoading: true,
      // 请求参数
      params: {
        alpha: "A", //首字母
      },
    };
  },
  components: {
    vNav,
    vFilter,
  },
  computed: {},
  watch: {},
  mounted() {
    this.getLabelList();
  },
  methods: {
    chooseType(type) {
      this.params.alpha = type.en;
      this.loadStatus = true;
      this.list = [];
      this.getLabelList();
    },
    //获取歌单
    async getLabelList() {
      this.fullscreenLoading = true;
      try {
        if (!this.params.alpha) {
          this.params = {};
        }
        this.loadStatus = false;
        let res = await this.$api.classical.getLabelList(this.params);
        if (res.code === 1000000) {
          this.list = res.source ? res.source : [];
          this.fullscreenLoading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    goto(val) {
      this.$router.push({
        name: "classicalBrandDetail",
        params: { id: val.catlabelId },
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
